<template>
  <div class="line-chart-container">
    <div ref="chartRef" class="line-chart"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
const chartRef = ref<HTMLElement | null>(null);
onMounted(() => {
  // 初始化 ECharts 实例
  const myChart = echarts.init(chartRef.value!);
  //配置折线图
  const option = {
    tooltip: {
      trigger: 'axis'
    },
    xAxis: [{
      type: 'category',
      data: ['周一','周二','周三','周四','周五','周六','周日'],
      axisLine: {
        lineStyle: {
          color: '#999'
        }
      },
    }],
    yAxis: [{
      type: 'value',
      splitNumber: 4,
      splitLine: {
        lineStyle: {
          type: 'dashed',
          color: '#DDD'
        }
      },
      axisLine: {
        show: false,
        lineStyle: {
          color: '#333'
        },
      },
      nameTextStyle: {
        color: '#999'
      },
      splitArea: {
        show: false
      }
    }],
    series: [{
      name: '人数',
      type: 'line',
      data: [90,20,20,30,23,15,78],
      lineStyle: {
        normal: {
          width: 8,
          color: {
            type: 'linear',

            colorStops: [{
              offset: 0,
              color: '#A9F387' // 0% 处的颜色
            }, {
              offset: 1,
              color: '#70a4e1' // 100% 处的颜色
            }],
            globalCoord: false // 缺省为 false
          },
          shadowColor: 'rgba(72,216,191, 0.3)',
          shadowBlur: 10,
          shadowOffsetY: 20
        }
      },
      itemStyle: {
        normal: {
          color: '#fff',
          borderWidth: 10,
          /*shadowColor: 'rgba(72,216,191, 0.3)',
          shadowBlur: 100,*/
          borderColor: '#a2c8f6'
        }
      },
      smooth: true
    }]
  };
  // 在这里手动触发显示tooltip
  setTimeout(()=>{
    myChart.dispatchAction({
      type: 'showTip',
      seriesIndex: 0,
      dataIndex: 1  // dataIndex对应 '2023-02'
    });
  },0)
  // 设置图表选项
  myChart.setOption(option);
});
</script>

<style scoped lang="scss">
.line-chart-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffffff;

  .line-chart {
    width: 650px;
    height: 350px;
  }
}
</style>